const data = [
    { url: './img/img-01.jpg', title: "鼓浪屿", color: 'rgb(43, 35, 26)' },
    { url: './img/img-02.jpg', title: "日光岩", color: 'rgb(36, 31, 33)' },
    { url: './img/img-03.jpg', title: "白城海滩", color: 'rgb(139, 98, 66)' },
    { url: './img/doubletower.jpg', title: "双子塔", color: 'rgb(100, 67, 68)' },
    { url: './img/longbridge.jpg', title: "十里长堤", color: 'rgb(67, 90, 92)' }
]

const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
const next = document.querySelector('.next')
let i = 0

next.addEventListener('click', function () {
    i++
    i = i >= data.length ? 0 : i
    toggle()
})

const prev = document.querySelector('.prev')
prev.addEventListener('click', function () {
    i--
    i = i < 0 ? data.length - 1 : i
    toggle()
})

function toggle() {
    img.src = data[i].url
    p.innerHTML = data[i].title
    footer.style.backgroundColor = data[i].color
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}



// 自动播放模块
let timerId = setInterval(function () {
    next.click()
}, 1000)


const slider = document.querySelector('.slider')
slider.addEventListener('mouseenter', function () {
    clearInterval(timerId)
})

slider.addEventListener('mouseleave', function () {
    // 停止定时器
    if (timerId) clearInterval(timerId)
    // 开启定时器
    timerId = setInterval(function () {
        next.click()
    }, 1000)
})